<!-- 自定义信息窗体 -->
<template>
	<view class="content">
		<view class="wrapperBox" style="position: relative;width: 100vw;height: 100vh;z-index: 1;">
			<view style="width: 120vw;height: 120vh;top: -10vh;left: -10vw;position: absolute;" id="wrapper"></view>
		</view>
	</view>
</template>

<script>
	let mapObj = null; // 生成组件实例
	let area = null; // 生成区域
	let agriculture = []; // 生成图标实例
	let property = []; // 生成图标实例
	let construction = []; // 生成图标实例
	let noRented = []; // 生成图标实例
	let marker = []; // 生成标点实例
	let infoWindow = null; // 自定义信息窗体
	let isShowText = false; // 窗体是否打开

	window.mapInit = function() { // 挂载地图实例
		mapObj = new TMap.Map("wrapper", {
			center: new TMap.LatLng(22.254515, 113.469689), // 地图初始坐标
			zoom: 14, // 缩放等级
			mapStyleId: 'style1', // 地图样式
			baseMap: { //设置底图样式
				type: 'vector', //设置底图为矢量底图
				features: [ //设置矢量底图要素类型
					'base',
					'point'
				]
			},
			zoomControl: false, // 设置是否启用缩放控件
		});

		infoWindow = new TMap.InfoWindow({ // 设置信息窗体
			map: mapObj, // 挂载的地图实例
			enableCustom: true, // 是否自定义窗体
			position: new TMap.LatLng(22.254515, 113.469689), // 初始标点坐标
			offset: { // 信息窗体的偏移量
				y: 30,
				x: 230
			},
			content: `<div style="width: 379px;height: 134px;padding:16px;"></div>`, // 必须设置一个底边的dom，否则会出现白边
		});

		mapObj.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);

		mapObj.on("click", function(evt) { // 地图全局事件
			//设置infoWindow
			if (isShowText) { // 控制是否打开窗体
				isShowText = false;
			} else {
				infoWindow.close();
			}
		})
	}

	export default {
		data() {
			return {
				key: 'OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77',
				iconItem: [{
					name: 'agriculture',
					src: require("@/static/dot-01.png"),
					position: [22.227959, 113.459589],
					markerUrl: require("@/static/dot-01.png"),
					background: require("@/static/bg-01.png"),
					titleUrl: require("@/static/title-01.png"),
				}, {
					name: 'property',
					src: require("@/static/dot-02.png"),
					position: [22.253496, 113.477076],
					markerUrl: require("@/static/dot-02.png"),
					background: require("@/static/bg-02.png"),
					titleUrl: require("@/static/title-02.png"),
				}, {
					name: 'construction',
					src: require("@/static/dot-03.png"),
					position: [22.237834, 113.463987],
					markerUrl: require("@/static/dot-03.png"),
					background: require("@/static/bg-03.png"),
					titleUrl: require("@/static/title-03.png"),
				}, {
					name: 'noRented',
					src: require("@/static/dot-04.png"),
					position: [22.253692, 113.498333],
					markerUrl: require("@/static/dot-04.png"),
					background: require("@/static/bg-04.png"),
					titleUrl: require("@/static/title-04.png"),
				}]
			}
		},
		onLoad() {
			// #ifdef H5
			this.loadScrpit();
			// #endif

			let time = setInterval(() => { // 等待地图挂载
				if (mapObj != null) {
					clearInterval(time);
					this.setIcon(); // 挂载坐标图片信息
				}
			}, 100)
		},
		created() {
			let that = this;
			window.getParkDetail = function(res) { // 设置信息窗体触发事件
				console.log(res);
				if (res == 0) {
					that.isDetail1 = true;
				}
				if (res == 2) {
					that.isDetail2 = true;
				}
			};
		},
		methods: {
			// 初始化
			loadScrpit() { // 挂载js
				var script = document.createElement('script');
				script.src =
					`https://map.qq.com/api/gljs?v=1.exp&key=${this.key}&libraries=visualization&callback=mapInit`;
				document.body.appendChild(script);
			},
			setIcon() { // 创建标点图标
				let that = this;
				// 创建 AMap.Icon 实例
				// 可以创建多个不同的样式，在加入标点时可以设置对应的样式
				agriculture = new TMap.MarkerStyle({
					"width": 75,
					"height": 90,
					"src": that.iconItem[0].markerUrl, // 图片链接，本地图片可以，但是网络图片却不行
				})
				property = new TMap.MarkerStyle({
					"width": 75,
					"height": 90,
					"src": that.iconItem[1].markerUrl,
				})
				construction = new TMap.MarkerStyle({
					"width": 75,
					"height": 90,
					"src": that.iconItem[2].markerUrl,
				})
				noRented = new TMap.MarkerStyle({
					"width": 75,
					"height": 90,
					"src": that.iconItem[3].markerUrl,
				})
				this.setMapMarker();
			},
			setMapMarker(Longitude, Latitude, id) { // 创建标点实例
				// 腾讯和高德不同的就是列表是一次加载完，只根据样式区分
				let geometries = []; // 标点列表

				for (let i = 0; i < this.iconItem.length; i++) {
					let obj = {
						"id": i,
						"styleId": this.iconItem[i].name,
						"position": new TMap.LatLng(this.iconItem[i].position[0], this.iconItem[i].position[1]),
						"properties": {
							"title": this.iconItem[i].name
						}
					}
					geometries.push(obj);
				}

				marker = new TMap.MultiMarker({ // 创建标点实例
					id: 'marker-layer', // 设置标点id
					map: mapObj, // 挂载到信息实例
					styles: { // 设置样式
						"agriculture": agriculture,
						"property": property,
						"construction": construction,
						"noRented": noRented,
					},
					geometries: geometries
				});

				let that = this;

				marker.on("click", function(evt) { // 给标点绑定事件打开信息窗体
					that.setInfoWindow(evt)
				})
			},
			setInfoWindow(evt) {
				let that = this;
				// 信息窗体模拟数据，需要使用接口
				let imageIcon = require("@/static/icon-22.png");
				let background = this.iconItem[0].background;
				let titleUrl = this.iconItem[0].titleUrl;
				let index = 0;
				let titleName = '';
				let assetName = '';
				let assetNumber = '';
				let managementUnit = '';
				let assetAddress = '';
				let landArea = '';
				let backgroundColor = '';

				//设置infoWindow
				infoWindow.open(); //打开信息窗
				infoWindow.setPosition(evt.geometry.position); // 根据当前坐标设置信息窗位置
				// console.log(evt.geometry.position);
				// 设置点击后的地图偏移的中心点
				mapObj.setCenter(new TMap.LatLng((evt.geometry.position.lat + 0.01), (evt.geometry.position
					.lng + 0.02)))

				if (evt.geometry.properties.title == 'agriculture') { // 根据不同的类型设置标点信息，需要接口代替
					background = that.iconItem[0].background;
					titleUrl = that.iconItem[0].titleUrl;
					index = 0;
					titleName = '测试1';
					assetName = '农地';
					assetNumber = '076地块';
					managementUnit = '测试1发展有限公司';
					assetAddress = '测试1地块';
					landArea = '240072.40m²';
					backgroundColor = 'rgba(35, 181, 29, 1)';
				}
				if (evt.geometry.properties.title == 'property') {
					background = that.iconItem[1].background;
					titleUrl = that.iconItem[1].titleUrl;
					index = 1;
					titleName = '测试2';
					assetName = '测试2用地';
					assetNumber = '037地块';
					managementUnit = '测试2有限公司';
					assetAddress = '测试2路旁';
					landArea = '17979.97m²';
					backgroundColor = 'rgba(70, 207, 209, 1)';
				}
				if (evt.geometry.properties.title == 'construction') {
					background = that.iconItem[2].background;
					titleUrl = that.iconItem[2].titleUrl;
					index = 2;
					titleName = '测试3';
					assetName = '测试3用地';
					assetNumber = '044地块';
					managementUnit = '测试3有限公司';
					assetAddress = '测试3路旁';
					landArea = '14488.01m²';
					backgroundColor = 'rgba(243, 228, 43, 1)';
				}
				if (evt.geometry.properties.title == 'noRented') {
					background = that.iconItem[3].background;
					titleUrl = that.iconItem[3].titleUrl;
					index = 3;
					titleName = '测试3';
					assetName = '测试3用地';
					assetNumber = '099地块';
					managementUnit = '测试3有限公司';
					assetAddress = '测试3路旁';
					landArea = '30667.61m²';
					backgroundColor = 'rgba(253, 143, 33, 1)';
				}
				// 设置信息窗体的样式，通过模板字符串赋值
				infoWindow.setContent(`
				<div style="width: 379px;height: 134px;position:relative;padding:16px;z-index:90;">
					<div style="">
						<div style="display: flex;align-items: center;justify-content: flex-start;">
							<image style="width:138px;height:107px;" src="${titleUrl}"></image>
							<div style="display: flex;align-items: flex-start;justify-content: space-between;flex-flow: column;height:107px;margin-left:12px">
								<div style="display: flex;align-items: center;justify-content: flex-start;width:220px">
									<div style="width: 6px;height: 6px;background: ${backgroundColor};margin-right:6px;"></div>
									<div style="font-size: 12px;font-family: PingFang SC-Semibold, PingFang SC;font-weight: 600;color: #FFFFFF;">${titleName}</div>
								</div>
								<div style="display: flex;align-items: center;justify-content: flex-start;width:220px;color:rgba(255, 255, 255, .5);font-weight: 400;font-size: 10px;">
									<div>资产编号：</div><div>${assetNumber}</div>
								</div>
								<div style="display: flex;align-items: center;justify-content: flex-start;width:220px;color:rgba(255, 255, 255, .5);font-weight: 400;font-size: 10px;">
									<div>资产类型：</div><div>${assetName}</div>
								</div>
								<div style="display: flex;align-items: center;justify-content: flex-start;width:220px;color:rgba(255, 255, 255, .5);font-weight: 400;font-size: 10px;">
									<div>管理单位：</div><div style="width: 160px;display: block;	overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">${managementUnit}</div>
								</div>
								<div style="display: flex;align-items: center;justify-content: flex-start;width:220px;color:rgba(255, 255, 255, .5);font-weight: 400;font-size: 10px;">
									<div>资产地址：</div><div>${assetAddress}</div>
								</div>
								<div style="display: flex;align-items: center;justify-content: flex-start;width:220px;color:rgba(255, 255, 255, .5);font-weight: 400;font-size: 10px;">
									<div>土地面积：</div><div>${landArea}</div>
								</div>
							</div>
						</div>
						<div onclick="(function (){this.window.getParkDetail(${index});})()"  style="cursor:pointer;margin-top:10px;display: flex;align-items: center;justify-content: flex-end;font-size: 12px;font-family: PingFang SC-Medium, PingFang SC;font-weight: 600;color: #FFFFFF;">
							<div>查看详情</div>
							<image src="${imageIcon}" style="width:8px;height:12px;margin-left:4px;margin-top:1px;"></image>
						</div>
					</div>
					<image src="${background}" style="position:absolute;width:100%;height:100%;top:0;left:0;z-index: -1;"></image>
				</div>`, )
				isShowText = true; // 设置打开
			},
		}
	}
</script>

<style>
	.content {
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	#wrapper {
		z-index: 20;
	}

	.content .tmap-scale-text {
		display: none;
	}

	.content .tmap-scale-control {
		display: none;
	}
</style>